<template>
	<view class="sq-detail">
		<view class="main-pd">
			<view class="u-flex u-flex-end" v-if="sqMsg.state == 2">
				<view class="color-f34b47 font-28 u-m-b-20" @click="$u.route('/pages/wdsq/mydpj', { id: sqMsg.sqId })">满意度评价</view>
			</view>
			<view class="qus-block">
				<view class="color-595959 font-28 u-m-b-16">诉求事项</view>
				<view class="color-333 font-32">{{ sqMsg.title || '' }}</view>
			</view>
			<view class="qus-block long-block u-m-t-20">
				<view class="color-595959 font-28 u-m-b-16">诉求具体描述</view>
				<view class="color-333 font-32">{{ sqMsg.content || '' }}</view>
			</view>
			<!-- 底部信息 -->
			<view class="cell-msg">
				<view class="cell-item">
					<view>提交人</view>
					<view>{{ userStore.dzkName }}</view>
				</view>
				<view class="cell-item">
					<view>所在单元</view>
					<view>{{ sqMsg.louNumber }}号楼{{ sqMsg.dyNumber }}单元{{ sqMsg.fjNumber }}号</view>
				</view>
				<view class="cell-item">
					<view>所属小区</view>
					<view>{{ sqMsg.deptName || '' }}</view>
				</view>
				<view class="cell-item">
					<view>提交时间</view>
					<view>{{ sqMsg.createTime || '' }}</view>
				</view>
				<view class="cell-item">
					<view>处理状态</view>
					<view>{{ clStatus(sqMsg.state) }}</view>
				</view>
				<view v-if="sqMsg.state == 2">
					<view class="cell-item row-item">
						<view>处理结果</view>
						<view class="u-m-t-16">{{sqMsg.cljg  || ''}}</view>
					</view>
					<view class="cell-item">
						<view>处理时间</view>
						<view>{{ sqMsg.clsj || '' }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed } from "vue";
import { getSqInfoApi } from "@/api/index";
import { onLoad } from "@dcloudio/uni-app";
import useInfoStore from "@/store/user"
const userStore = useInfoStore()
let sqMsg = ref({});
const clStatus = computed((status) => {
	return function (status) {
		let statusArr = ["待处理", "处理中", "已处理"];
		return statusArr[status];
	};
});
const getSqInfoHandle = (id) => {
	getSqInfoApi({
		id,
	}).then((res) => {
		if (res.success) {
			sqMsg.value = res.data;
		}
	});
};
onLoad((param) => {
	getSqInfoHandle(param.id);
});
</script>

<style lang="scss" scoped>
.sq-detail {
	padding-top: 20rpx;
	padding-bottom: 80rpx;

	.qus-block {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 32rpx;
		box-sizing: border-box;
		min-height: 246rpx;
	}

	.long-block {
		min-height: 366rpx;
	}

	.pic-item {
		margin-right: 16rpx;
		margin-bottom: 16rpx;

		&:nth-child(4n) {
			margin-right: 0;
		}
	}

	.cell-msg {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 0 32rpx;
		box-sizing: border-box;
		margin-top: 20rpx;

		.cell-item {
			border-bottom: 1px solid #e6e6e6;
			display: flex;
			justify-content: space-between;
			padding: 30rpx;
			font-size: 32rpx;
			color: #595959;

			&:last-child {
				border: none;
			}
		}

		.row-item {
			flex-direction: column;
			justify-content: start;
		}
	}
}
</style>
